<template>
  <el-dialog title="回单"
             top="20vh"
             width="580px"
             class="dialog-box"
             append-to-body
             :visible="visible"
             :close-on-click-modal="false"
             @update:visible="handleVisible">
    <ReceiptForm v-model="receipt"
                 :waybill-type="waybillType"
                 :is-root-waybill="isRootWaybill"
                 :receipt-pics="receiptPics" />
    <div slot="footer">
      <el-button type="default"
                 @click="handleClose">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="handleSubmit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import ReceiptForm from "@/components/basic/ReceiptForm.vue";
import WaybillMixin, { ATTACHMENT_TYPES } from "./waybill.mixin";

export default {
  name: "WaybillReceiptSubmit",
  components: { ReceiptForm },
  mixins: [WaybillMixin],
  props: {
    value: Object,
    fulfill: Function,
    visible: Boolean,
    beforeSubmit: Function,
    uploadReceiptPics: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      receipt: {
        receiptDesc: "",
        receiptType: 0,
        receiptTime: this.$moment(new Date()).format("YYYY-MM-DD 23:59:00"),
        receiptSignTime: null,
        syncUpAttachments: []
      }
    };
  },
  computed: {
    receiptSignTime () {
      return this.waybill.sign?.signAtAmend;
    },
    waybillType () {
      return this.waybill.waybillType;
    },
    isRootWaybill () {
      return this.waybill.isRootWaybill;
    },
    receiptPics () {
      let picArr = (this.waybill?.attachments || [])
        .filter((pic) => pic.type === ATTACHMENT_TYPES.RECEIPT_PIC)
        .map((pic) => pic.url);
      let uploadPicArr = (this.uploadReceiptPics || [])
        .filter((pic) => pic.type === ATTACHMENT_TYPES.RECEIPT_PIC)
        .map((pic) => pic.url);
      picArr = [...picArr, ...uploadPicArr]
      return picArr;
    },
    receiptPicsList () {
      let picArr = (this.waybill?.attachments || [])
        .filter((pic) => pic.type === ATTACHMENT_TYPES.RECEIPT_PIC)
        .map((pic) => pic);
      let uploadPicArr = (this.uploadReceiptPics || [])
        .filter((pic) => pic.type === ATTACHMENT_TYPES.RECEIPT_PIC)
        .map((pic) => pic);
      picArr = [...picArr, ...uploadPicArr]
      return picArr;
    },
  },
  created () {
    this.receipt.receiptSignTime = this.receiptSignTime;
  },
  methods: {
    handleBeforeSubmit () {
      if (typeof this.beforeSubmit !== "function") {
        return true;
      }
      return this.beforeSubmit(this.receipt);
    },
    handleClose () {
      this.$emit("update:visible", false);
    },
    handleVisible (visible) {
      this.$emit("update:visible", visible);
    },
    handleInput (receipt) {
      this.receipt = receipt;
    },
    handleSubmit () {
      if (!this.receiptSignTime) {
        this.$message.warning("签收时间不能为空！");
        return;
      }
      if (!this.handleBeforeSubmit()) {
        console.log("Handle before submit false", JSON.stringify(this.receipt));
        return;
      }

      let arr = [];
      if (this.receiptPicsList.length && this.receipt.syncUpAttachments.length) {
        this.receiptPicsList.map(item => {
          this.receipt.syncUpAttachments.map(ele => {
            if (item.url === ele.url) {
              arr.push(item)
            }
          })
        })
      }
      this.$emit("submit", { ...this.receipt, syncUpAttachments: arr });
    }
  },
  watch: {
    receiptSignTime () {
      this.$nextTick(() => {
        this.receipt.receiptSignTime = this.receiptSignTime;
      });
    }
  }
};
</script>
<style scoped>
.dialog-box >>> .el-dialog__body {
  max-height: 460px !important;
  overflow: auto !important;
}
</style>
